class view {
    constructor(element) {
        this.element = element;
        this.data = {};
    }
    setCatalog(style) {
        let li = `<li><p><a href="#style-${style}">style-${style}</a></p></li>`;
        console.log(li);
        $(".catalog").find("#catalog_style").append(li);
        let a = $("#catalog").find("#catalog_style").text();
    }
    setImg(style,img,title){
        let li = `<li>
            <img style="width: 300px;height: auto" onmouseleave="$(this).css('background','#ffffff')" onmouseover="$(this).css('background','#cdcdcd');${this.element}.setCode('${style}','${img}')" src="${img}" alt="">
            <p class="title">${title}</p>
            </li>`;
        $("#style-"+style).find(".imgs").append(li);
    }
    setCode(style,img){
        let code = this.data.style[style][img];
        $('#style-'+style).find('.code').text(code);
    }
    init(list){
        this.data.style = {};
        for(let i in list){
            let {style,data} = list[i];
            let styleDiv = `<div class="style" id="style-${style}">
                                <h2>style-${style}:</h2>
                                <xmp class="code">代码区域</xmp>
                                <ul class="imgs"></ul>
                            </div>`;
            $("#style").append(styleDiv);
            this.setCatalog(style);
            this.data.style[style] = {};
            for(let i in data){
                console.log(data[i].img);
                this.data.style[style][data[i].img] = data[i].code;
                this.setImg(style,data[i].img,data[i].title);
            }
        }
    }
}
